<template>
	<view class="container">
		<view class="top-list">
			<view class="nav-list u-flex u-col-center u-row-between">
				<view class="item" :class="{ on: navIndex == index }" v-for="(item, index) in navList" :key="index" @click="changeNav(item, index)">
					{{ item.name }}
				</view>
			</view>
			<view class="total-search u-flex u-col-center u-row-between">
				<view class="total">
					共
					<text>{{ total }}</text>
					条记录
				</view>
				<view class="search u-flex u-col-center" @click="open">
					<uni-icons type="search" color="#A3A3A3" size="20"></uni-icons>
					<text>搜索</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="i-top u-flex u-col-top u-row-between" @click="$pageTo(`/pages/user/order/orderInfo?id=${item.id}`)">
					<view class="img">
						<image :src="item.image" mode="aspectFill" v-if="item.image"></image>
						<image :src="webconfigImg" mode="aspectFill" v-else></image>
						<view class="ss" v-if="item.statusUp == 1">待发布</view>
						<view class="ss sss" v-if="item.statusUp == 2">发布中</view>
						<view class="ss" v-if="item.statusUp == 3">已下架</view>
					</view>
					<!-- 	`status` tinyint NOT NULL DEFAULT '1' COMMENT '审核状态 1待发布 2审核中 3审核通过 4审核驳回',
					  `status_up` tinyint NOT NULL DEFAULT '1' COMMENT '上架状态 1待发布 2发布中 3已下架', -->
					<view class="con">
						<view class="" style="">
							<view class="n-s u-flex u-col-top u-row-between">
								<view class="n u-line-2">
									{{ item.name }}
								</view>
								<view class="s">
									<text class="s1" v-if="item.status == 1">待发布</text>
									<text class="s2" v-if="item.status == 2">审核中</text>
									<text class="s3" v-if="item.status == 3">审核通过</text>
									<text class="s4" v-if="item.status == 4">审核失败</text>
								</view>
							</view>
							<view class="see">查看次数：{{ item.number }}次</view>
						</view>
						<view class="price" v-if="item.price">
							<text
								class="p"
								:class="{
									p1: getPriceLength(item.price) < 6,
									p2: getPriceLength(item.price) == 6,
									p3: getPriceLength(item.price) == 7,
									p4: getPriceLength(item.price) == 8,
									p5: getPriceLength(item.price) >= 9
								}"
							>
								{{ $numToLocaleString(item.price) }}
							</text>
							<text class="y">{{ item.priceUnit == 0 ? 'MHB' : '元' }}</text>
						</view>
						<view class="flex_jc_sb">
							<view class="txx" v-if="item.type == 2 && item.priceMode == 1">买家出价</view>
							<view class="tip" v-if="item.type == 2 && item.notSeeCount != 0">{{ item.notSeeCount }} 条新报价</view>
						</view>
					</view>
				</view>
				<view class="s-info" v-if="item.status == 4">原因:{{ item.check_desc }}</view>
				<!--  `status` '审核状态 1待发布 2审核中 3审核通过 4审核驳回',
				  `status_up` '上架状态 1待发布 2发布中 3已下架', -->
				<view class="i-footer u-flex u-col-center u-row-right">
					<!-- 删除  待发布&&不是审核通过的  -->
					<!-- 编辑  待发布&&（待发布||审核驳回）||  已下架&&（审核通过||审核驳回）  -->
					<view
						class="btn btn1"
						@click.stop="del(item.id)"
						v-if="(item.statusUp == 1 && item.status != 3) || (item.statusUp == 3 && (item.status == 4 || item.status == 3))"
					>
						删除
					</view>
					<view class="btn btn1" @click.stop="handlechexiao(item.id)" v-if="item.status == 2">撤销</view>
					<view class="btn btn2" v-if="item.statusUp == 3 && item.status == 3" @click.stop="quotationUp(item, 'edit')">重新上架</view>
					<view
						class="btn btn1"
						v-if="item.status == 3 && item.statusUp == 2 && item.priceMode == 2"
						@click="$pageTo(`/pages/user/order/orderInfo?id=${item.id}&show=1`)"
					>
						改价
					</view>
					<view class="btn btn1" v-if="item.status == 3 && item.statusUp == 2" @click="quotationDown(item.id)">下架</view>
					<view class="btn btn2" v-if="item.statusUp == 1 && item.status == 1" @click="quotationArraign(item.id)">立即发布</view>
					<view class="btn btn2" v-if="item.statusUp == 2 && item.status == 3 && item.priceMode == 1" @click="goprice(item)">查看出价</view>
					<view class="btn btn2" v-if="item.status == 3 && item.statusUp == 2 && item.priceUnit == 1 && item.priceMode != 1">
						邀请下单
						<button class="btns" open-type="share" :data-obj="item"></button>
					</view>
				</view>
			</view>
			<view class="nolist" v-if="nolist">
				<image src="/static/kong2.png" mode="aspectFill"></image>
				<text>暂无信息</text>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="hwk-pop">
				<uni-icons type="closeempty" size="22" color="#AEAEAE" class="icons" @click="close"></uni-icons>
				<view class="p-title">搜索筛选</view>
				<view class="p-search">
					<uni-icons type="search" size="22" color="#AEAEAE"></uni-icons>
					<input style="padding-left: 10rpx" placeholder="请输入" v-model="name" prefixIconStyle="font-size: 22px;color: #909399" />
				</view>
				<view class="p-list">
					<view class="item">
						<view class="title">审核状态</view>
						<view class="con2">
							<view class="i u-1" :class="{ on: params.status1 == item.type }" v-for="(item, index) in sList" :key="index" @click="changes(item, 'status1')">
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="item">
						<view class="title">上架状态</view>
						<view class="con2">
							<view class="i u-1" :class="{ on: params.status2 == item.type }" v-for="(item, index) in sList1" :key="index" @click="changes(item, 'status2')">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="p-btns u-flex u-col-center u-row-between">
					<view class="btn btn1" @click="clearData">清空</view>
					<view class="btn btn2" @click="search">搜索</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { quotationList, removeQuotationList, downQuotationList, fbQuotationList, usersquotationCancelArraign } from '@/common/http.api.js';
export default {
	data() {
		return {
			webconfigImg: uni.getStorageSync('webconfig').productDefaultImage,
			sList: [
				{
					name: '待发布',
					type: '1'
				},
				{
					name: '审核中',
					type: '2'
				},
				{
					name: '审核通过',
					type: '3'
				},
				{
					name: '审核失败',
					type: '4'
				}
			],
			sList1: [
				{
					name: '待发布',
					type: '1'
				},
				{
					name: '发布中',
					type: '2'
				},
				{
					name: '已下架',
					type: '3'
				}
			],
			name: '',
			navList: [
				{
					name: '我的收购',
					type: '1'
				},
				{
					name: '我的出售',
					type: '2'
				}
			],
			navIndex: 0,

			list: [],
			params: {
				page: 1,
				type: 1,
				name: '',
				status1: '',
				status2: ''
			},
			pages: 0,
			nolist: false,
			total: 0
		};
	},

	onLoad() {
		this.userId = uni.getStorageSync('userId');
	},
	onShow() {
		this.params.page = 1;
		this.list = [];
		this.getList();
	},
	onShareAppMessage(e) {
		if (e.from === 'button') {
			let obj = e.target.dataset.obj; // 获取 button 组件 自定义的data-obj值
			if (obj.image == '') {
				return {
					title: `商人${uni.getStorageSync('userInfo').nickname}邀请您进行交易`, // 标题
					imageUrl: this.webconfigImg, // 封面图
					path: `/pages/index/newpage/shareorder?shareId=${obj.id}` // 地址以及参数
				};
			} else {
				return {
					title: `商人${uni.getStorageSync('userInfo').nickname}邀请您进行交易`, // 标题
					imageUrl: obj.image, // 封面图
					path: `/pages/index/newpage/shareorder?shareId=${obj.id}` // 地址以及参数
				};
			}
		}
	},
	onReachBottom() {
		if (this.params.page < this.pages) {
			this.params.page++;
			this.getList();
		} else {
			uni.showToast({
				title: '没有了',
				icon: 'none'
			});
		}
	},
	computed: {
		getPriceLength() {
			return (data) => {
				if (!data) return 1;

				function getDigitCount(num) {
					if (num === 0) return 1;

					num = Math.abs(parseInt(num)); // 忽略小数部分，只处理整数
					return Math.floor(Math.log10(num)) + 1;
				}
				let l = getDigitCount(data);
				return l;
			};
		}
	},
	methods: {
		// 查看出价
		goprice(item) {
			uni.navigateTo({
				url: `/pages/user/order/priceList?id=${item.id}`
			});
		},
		clearData() {
			this.params.status1 = '';
			this.params.status2 = '';
			this.name = '';
		},
		search() {
			this.close();
			this.params.page = 1;
			this.list = [];
			this.getList();
		},
		changes(item, type) {
			this.params[type] = item.type;
		},
		open() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		changeNav(item, index) {
			if (this.navIndex != index) {
				this.navIndex = index;
				this.list = [];
				this.params.type = item.type;
				this.page = 1;
				this.getList();
			}
		},
		getList() {
			quotationList(this.params).then((res) => {
				if (res.code == 200) {
					res.data.list.forEach((item) => (item.remainingTime = ''));
					this.list = [...this.list, ...res.data.list];
					this.pages = Math.ceil(res.data.total / 10);
					this.total = res.data.total;
					this.nolist = this.list.length == 0;
				}
			});
		},
		handlechexiao(id) {
			this.$modal
				.confirm('是否要撤销当前发布？', '撤销提示')
				.then(() => {
					return usersquotationCancelArraign(id);
				})
				.then(() => {
					this.$modal.msgSuccess('撤销成功');
					this.list = [];
					this.page = 1;
					this.getList();
				})
				.catch(() => {});
		},
		del(id) {
			this.$modal
				.confirm('是否要删除当前数据？', '删除提示')
				.then(() => {
					return removeQuotationList({
						id,
						paytype: 2
					});
				})
				.then(() => {
					this.$modal.msgSuccess('删除成功');
					this.list = [];
					this.page = 1;
					this.getList();
				})
				.catch(() => {});
		},
		quotationDown(id) {
			this.$modal
				.confirm('是否要下架当前报价信息？', '下架提示')
				.then(() => {
					return downQuotationList(id);
				})
				.then(() => {
					this.$modal.msgSuccess('下架成功');
					this.list = [];
					this.page = 1;
					this.getList();
				})
				.catch(() => {});
		},
		quotationArraign(id) {
			this.$modal
				.confirm('确认要立即发布吗？', '温馨提示')
				.then(() => {
					return fbQuotationList(id);
				})
				.then(() => {
					this.$modal.msgSuccess('发布成功');
					this.list = [];
					this.page = 1;
					this.getList();
				})
				.catch(() => {});
		},
		// 跳转到编辑
		quotationUp(data, from) {
			let obj = {
				id: data.id,
				status: data.status,
				status_up: data.statusUp,
				from
			};
			uni.navigateTo({
				url: '/pages/user/order/editorder?obj=' + encodeURIComponent(JSON.stringify(obj))
			});
		}
	}
};
</script>

<style lang="less" scoped>
@color: #ff6f07;
.tip {
	height: 28rpx;
	background: #fe1515;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 20rpx;
	color: #ffffff;
	text-align: center;
	line-height: 28rpx;
	padding: 0rpx 10rpx;
}
.container {
	.nolist {
		padding: 100rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;

		image {
			width: 160rpx;
			height: 136rpx;
		}

		text {
			font-size: 24rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}

	.hwk-pop {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		position: relative;
		min-height: 640rpx;

		.icons {
			position: absolute;
			right: 30rpx;
		}

		.p-btns {
			margin-top: 80rpx;
			width: 100%;

			.btn {
				width: 340rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 12rpx;
				font-size: 32rpx;
				text-align: center;
				position: relative;
			}

			.btn1 {
				color: #11192d;
				background: #f4f4f4;
			}

			.btn2 {
				background-color: @color;
				color: #fff;
			}
		}

		.p-title {
			text-align: center;
			height: 44rpx;
			line-height: 44rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #11192d;
		}

		.p-search {
			background-color: #f4f4f4;
			margin-top: 36rpx;
			display: flex;
			padding: 10rpx 15rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
			align-items: center;
		}

		.p-list {
			.item {
				margin-top: 30rpx;

				.title {
					height: 40rpx;
					line-height: 40rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}

				.con {
					width: 100%;
					height: 72rpx;
					background: #ffffff;
					border-radius: 8rpx;
					border: 1px solid #d5d5d5;
					padding: 0 20rpx;
					box-sizing: border-box;
					margin-top: 20rpx;
					.l {
						font-weight: 500;
						font-size: 26rpx;
						color: #11192d;
					}

					.r {
					}
				}

				.con2 {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					grid-gap: 10rpx;
					row-gap: 20rpx;
					margin-top: 20rpx;

					.i {
						// width: 170rpx;
						height: 72rpx;
						line-height: 72rpx;
						background: #ffffff;
						border-radius: 8rpx;
						border: 1px solid #d5d5d5;
						font-size: 26rpx;
						color: #11192d;
						text-align: center;
					}

					.on {
						background-color: @color;
						border-color: @color;
						color: #fff;
					}
				}

				.con3 {
					margin-top: 20rpx;

					.i {
						width: 320rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 26rpx;
						color: #d9d9d9;
						background: #ffffff;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 1px solid #d5d5d5;
					}

					.on {
						color: #333;
					}

					.i2 {
						width: 28rpx;
						height: 2rpx;
						background-color: #d9d9d9;
					}
				}
			}
		}
	}

	.list {
		padding: 180rpx 20rpx 20rpx;

		.item {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.s-info {
				margin-top: 10rpx;
				color: #fe1515;
				font-size: 24rpx;
				line-height: 40rpx;
			}

			.s-down {
				margin-top: 10rpx;
				color: #11192d;
				font-size: 24rpx;
				line-height: 40rpx;

				text {
					color: #ff6f07;
				}
			}

			.i-footer {
				margin-top: 20rpx;

				.btn {
					width: 160rpx;
					height: 68rpx;
					line-height: 68rpx;
					border-radius: 12rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					text-align: center;
					margin-left: 20rpx;
					position: relative;
				}

				.btns {
					top: 0%;
					left: 0%;
					position: absolute;
					width: 100%;
					height: 68rpx;
					opacity: 0.1;
				}

				.btn1 {
					background: #ffffff;
					border: 2rpx solid #d5d5d5;
					color: #979797;
				}

				.btn2 {
					background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
					color: #fff;
				}
			}

			.i-top {
				.img {
					width: 180rpx;
					height: 180rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					overflow: hidden;
					position: relative;
					background-color: #f8f8f8;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;

					image {
						width: 100%;
						height: 100%;
					}

					.no {
						width: 80rpx;
						height: 80rpx;
					}

					.ss {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						padding: 0 10rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						font-size: 24rpx;
						color: #fff;
						background-color: rgba(0, 0, 0, 0.5);
						z-index: 9;
					}

					.sss {
						background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
					}
				}

				.con {
					flex: 1;
					width: 1rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 180rpx;
					.n-s {
						.n {
							font-size: 30rpx;
							color: #11192d;
							line-height: 40rpx;
							flex: 1;
							width: 1rpx;
							margin-right: 10rpx;
						}

						.s {
							color: #979797;
							font-size: 28rpx;

							.s1 {
								color: #979797;
							}

							.s2 {
								color: #ff8832;
							}

							.s4 {
								color: #e90202;
							}
							.s3 {
								color: #54bd6a;
							}
						}
					}

					.see {
						height: 36rpx;
						line-height: 36rpx;
						background: #f9f9f9;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						color: #979797;
						font-size: 20rpx;
						padding: 0 10rpx;
						margin-top: 10rpx;
						display: inline-block;

						text {
						}
					}
					.txx {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #979797;
					}

					.price {
						margin-top: 10rpx;
						height: 50rpx;
						line-height: 50rpx;

						.p {
							font-family: 'DIN';
							font-weight: bold;
							font-size: 36rpx;
							text-align: left;
						}

						.p5 {
							color: #ff70a4;
						}

						.p4 {
							color: #840ffb;
						}

						.p3 {
							color: #fe1515;
						}

						.p2 {
							color: #1ec742;
						}

						.p1 {
							color: #11192d;
						}

						.y {
							color: #979797;
							font-size: 20rpx;
							margin-left: 10rpx;
							font-weight: 400;
							height: 50rpx;
							line-height: 50rpx;
						}
					}
				}
			}
		}
	}

	.top-list {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 99;

		.total-search {
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			.total {
				flex: 1;
				width: 1px;
				margin-right: 20rpx;
				font-size: 28rpx;
				color: #8e8e8e;

				text {
					color: #11192d;
				}
			}

			.search {
				width: 280rpx;
				height: 64rpx;
				background: #f4f4f4;
				border-radius: 32rpx;
				box-sizing: border-box;
				padding-left: 20rpx;

				text {
					font-size: 28rpx;
					color: #a3a3a3;
					margin-left: 10rpx;
				}
			}
		}

		.nav-list {
			height: 80rpx;
			line-height: 80rpx;
			width: 100%;

			.item {
				flex: 1;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				color: #8e8e8e;
				font-size: 30rpx;
			}

			.on {
				color: @color;
				position: relative;
				font-weight: 600;

				&:after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					width: 60rpx;
					height: 4rpx;
					background: @color;
					border-radius: 4rpx;
					margin-left: -30rpx;
				}
			}
		}
	}
}
</style>
